<template>
  <div class="swiper-card-box">
    <div class="next1" id="imgC">
      <img src="../assets/images/3.png" alt="">
    </div>
    <div class="next2" id="imgC">
      <img src="../assets/images/4.png" alt=""></div>
    <div class="current" id="imgC">
      <img src="../assets/images/5.png" alt=""></div>
  </div>
</template>

<script lang="ts" setup>

import {onMounted} from "vue";

onMounted(() => {
  const imgs = document.querySelectorAll<HTMLUListElement>(".swiper-card-box div")
  const list: Array<string> = []
  for (let img of imgs) {
    list.push(img.className)
  }
  list.reverse()



  const x = () => {
    list.unshift(list.pop() as string)
    for (let i = 0; i < list.length; i++) {
      imgs[i].className = list[i]
    }
  }
  setInterval(x,3000)

})

</script>

<style lang="less" scoped>
.swiper-card-box {
  width: 100%;
  height: 100%;
  display: flex;
  color: white;
  align-items: start;

  position: relative;
  list-style: none;
}

#btn {
  position: absolute;
  right: 0;
  top: 0;
}

#imgC {
  position: absolute;
  width: 85%;
  height: 85%;
  border-radius: 15px;
  background-size: 100% 100%;
  border: 1px solid whitesmoke;
  overflow: hidden;
  transition: 0.5s;
  box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px,
  rgba(0, 0, 0, 0.3) 0 7px 13px -3px,
  rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

  img {
    width: 100%;
    height: 100%;
  }
}

.current {
  transform: translateX(50px) translateY(50px);
  //background-image: url("@/assets/images/3.png");
  z-index: 10;
}

.next2 {
  transform: translateX(25px) translateY(25px);
  //background-image: url("@/assets/images/4.png");
  z-index: 9;
}

.next1 {
  transform: translateX(0) translateY(0);
  z-index: 8;
  //background-image: url("@/assets/images/5.png");
}
</style>